@import './variable';

@mixin respond-to($breakname) {
    $bp: map-get($breakpoint, $breakname);

    @if type-of($bp)=='list' {
        $min: nth($bp, 1);
        $max: nth($bp, 2);

        @media (min-width:$min) and (max-width:$max) {
            @content;
        }
    }

    @else {
        @media (min-width:$bp) {
            @content;
        }
    }
}
// 使用案例
// .header {
//     width: 100%;
//     height: 250px;
//     border: 1px solid red;

//     @include respond-to('tv') {
//         background-color: red;
//     }

//     @include respond-to('phone') {
//         background-color: orange;
//         display: none;
//     }
// }